<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <script>
      function addCs() {
        // 创建一个新的元素
        // 创建元素
        var csli = document.createElement("li"); //<li> </li>
        csli.id = "cs";
        csli.innerText = "长沙";
        // 将子元素放入父元素中
        // 获取父元素
        var cityul = document.getElementById("city");
        // 在父元素中追加子元素
        cityul.appendChild(csli);
      }

      function addCsBeforeSz() {
        // 创建一个新元素
        // 创建元素
        var csli = document.createElement("li");
        csli.id = "sc";
        csli.innerText = "四川";
        // 将子元素放入父元素
        var cityul = document.getElementById("city");
        // 在父元素中追加子元素
        var szli = document.getElementById("sz");
        // 添加新的元素
        // cityul.insertBefore(新元素，参考元素)
        cityul.insertBefore(csli,szli);
    }
    function replaceSh() {
        // 创建一个新元素
        // 创建元素
        var csli = document.createElement("li");
        csli.id = "xz";
        csli.innerText = "西藏";
        // 将子元素放入父元素中
        var cityul = document.getElementById("city");
        // 在父元素中追加子元素
        var shli = document.getElementById("sh");
        // 替换元素：
        // cityul.replacechild(新元素,被替换的元素);
        cityul.replaceChild(csli,shli);
    }
    function removeSx() {
        // 获取到要删除的元素后，调用 remove 函数即可实现删除~
        var sxli = document.getElementById("sx");
        sxli.remove();

    }
    function clearCity() {
        var cityul = document.getElementById("city");

        // 法1：逐条删除元素
        // var fc = cityul.firstChild;
        // while (fc != null) {
        //     fc.remove();
        //     fc = cityul.firstChild;
        // }
        // 法2：整个大 ul 删除
        // cityul.remove();

        // 法3：将大的 ul 里面内容置为空
        cityul.innerHTML = "";
    }
    </script>
  </head>
  <body>
    <ul id="city">
      <li id="bj">北京</li>
      <li id="sz">深圳</li>
      <li id="sh">上海</li>
      <li id="sx">山西</li>
    </ul>
    <hr />
    <!-- 目标1：在城市列表的最后添加一个子标签  <li id = "cs">长沙</li> -->
    <button onclick="addCs()">在城市列表的最后增加长沙</button>
    <!-- 目标2：在城市列表的深圳前增加一个子标签 <li id = "sc">四川</li>  -->
    <button onclick="addCsBeforeSz()">在深圳前面增加四川</button>
    <!-- 目标3：将城市列表的上海替换为西藏 <li id = "xz">西藏</li> -->
     <button onclick = "replaceSh()">将上海替换成西藏</button>
     <!-- 目标4：将城市列表中的山西删除 -->
    <button onclick = "removeSx()">将城市列表中的山西删除</button>
    <!-- 目标5：清空城市列表 --> 
     <button onclick = "clearCity()">清空城市列表</button>
  </body>
</html>
